import 'package:flutter/material.dart';

class AppBarHomePage extends StatefulWidget {
  const AppBarHomePage({Key? key}) : super(key: key);

  @override
  State<AppBarHomePage> createState() => _AppBarHomePageState();
}

class _AppBarHomePageState extends State<AppBarHomePage> with SingleTickerProviderStateMixin{
  late TabController tabController;
  List tabValues = ["科技","军事","历史"];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    tabController = TabController(length: tabValues.length, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("标题"),
        centerTitle: true,
        // 左侧的图标
        leading: Builder(builder: (context) => 
            IconButton(
              onPressed: (){
                print("点击了左侧按钮");
                // 打开左面的菜单页面
                Scaffold.of(context).openDrawer();
              }, 
              icon: Icon(Icons.home))
        ),
        actions: [
          IconButton(icon: Icon(Icons.message), onPressed: (){print("点击了消息按钮");}),
          IconButton(icon: Icon(Icons.share), onPressed: (){print("点击了分享按钮");}),
          IconButton(icon: Icon(Icons.close), onPressed: (){print("点击了关闭按钮");}),
        ],
        // 标题下面显示一个tab 导航栏
        bottom: TabBar(
          controller: tabController,
          tabs: tabValues.map((e) => Tab(text: e,)).toList(),
          indicatorColor: Colors.red,//指示器的颜色
          indicatorSize:TabBarIndicatorSize.tab,//指示器的宽度  .label 宽度和字体宽度一样   .tab 宽度为整个tab的宽度
          isScrollable: false,//是否可滑动  当tab数量特别多的时候设为true
          labelColor:Colors.purple,//选中的颜色
          unselectedLabelColor: Colors.white,//未选中的颜色
          indicatorWeight: 3,//指示器的高度

        )
       
    ),
    body: TabBarView(
        controller: tabController,
        children: tabValues.map((e){
          return Container(
            alignment: Alignment.center,
            child: Text(e,textScaleFactor: 2,),
          );
        }).toList(),
      ),
    drawer: Container(color: Colors.yellow,width: 250,),
    );
  }
}